<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="login-box-h2">在线教育网后台管理系统</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="form"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input
            v-model="ruleForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="用户名"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            style="margin-top: 20px"
            type="password"
            v-model="ruleForm.password"
            prefix-icon="el-icon-s-goods"
            placeholder="密码"
          >
          </el-input>
        </el-form-item>
         <el-form-item> 
          <el-button
            type="primary"
            @click="submitForm()"
            style="width: 100%"
            >登录</el-button
          > 
        </el-form-item>
      </el-form>
      <a style="color: #fff;  text-decoration:none;" href="/register">没有账号？立即注册!</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: "27732357@qq.com",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods:{
    submitForm(){
      this.$refs.form.validate(async(valid)=>{
        if(!valid){
          return this.$message('用户信息有误')
        }
        var {data:res} = await this.$http({
        url: '/v1/vue3system/api/users/login',
        method: 'post',
        data: {
          email: this.ruleForm.username ,
          password: this.ruleForm.password,
        },
      }).catch(err=>err)
      console.log(res)
      var token = res.token
      localStorage.setItem('token', token)
      this.$router.push('/home')
      })
      
    }
  }
}

</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw; //  可视区域的宽度
  height: 100vh; //  可视区域的高度
  background: rgb(45, 58, 75);
  position: relative;
}
.login-box {
  width: 500px;
  height: 300px;
  position: absolute;
  left: 50%;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login-box-h2 {
  color: white;
  text-align: center;
}
.demo-ruleForm {
  margin-top: 40px;
}
.el-button {
  width: 100%;
  margin-top: 20px;
}
</style>